import React from "react";
import { Route, NavLink, Switch, Redirect } from "react-router-dom";

import Header from "./components/Header";
import Home from "./pages/Home/index";
import About from "./pages/About";

function App() {
  return (
    <div className="app">
      <Header a="1" b="2" />
      <div className="main">
        <div className="left">
          <NavLink className="link" to="/home" activeClassName="hello">
            Home
          </NavLink>
          <NavLink className="link" to="/about" activeClassName="hello">
            About
          </NavLink>
        </div>
        <div className="right">
          {/* 
            期望，如果当前的 /home /about 都不能匹配的话，重定向到 /about

              问题1：能把 Switch 给去掉嘛？
              回答1：不能去掉，Switch 必须写，能更高效

              问题2：Redirect 能放在第一位嘛
              回答2：不能
          */}

          <Switch>
            <Route path="/home" component={Home} />
            <Route path="/about" component={About} />
            <Redirect to="/about" />
          </Switch>
        </div>
      </div>
    </div>
  );
}

export default App;
